<template>
	<div class="form">
		<div class="form-group" :class="{'form-group--error':$v.user.account.$error}">
			<input type="text" v-model.trim="user.account" @input="$v.user.account.$touch()" class="form-control" placeholder="请输入手机号或邮箱" >
			<div>
				<label v-if="!$v.user.account.required" class="form-group__message zoomIn animated animated_500ms">账号不能为空</label>
			</div>
		</div>
		<div class="form-group" :class="{'form-group--error':$v.user.password.$error}">
			<input type="text" v-model.trim="user.password" @input="$v.user.password.$touch()" class="form-control" placeholder="请输入密码" >
			<div>
				<label v-if="!$v.user.password.required" class="form-group__message zoomIn animated animated_500ms">密码不能为空</label>
			</div>
		</div>
		<div class="btn-area">
			<button type="button" class="btn form-control active" @click.stop="login">登录</button>
			<button type="button" class="btn form-control" @click.stop="changeModule('phone-login')">使用验证短信登录</button>
		</div>
		<p class="fg-pwd text-right">忘记密码?</p>
	</div>
</template>
<script>
	import { required } from 'vuelidate/lib/validators'

	export default {
		name:'login',
		data(){
			return {
				user:{account:'',password:''}
			}	
		},
		validations:{
			user:{
				account:{
					required
				},
				password:{
					required
				}
			}
		},
		methods:{
			changeModule(m){
				this.$store.dispatch( 'changeCurrentView','phone-login' )
			},
			login(){
				let $v = $.extend( true,{},this.$v );

				this.$v.user.$touch();
				if( !$v.$invalid ){
					this.$store.dispatch( 'ChangeToastState',{
						sign:true,
						text:'提醒成功'
					} )
					this.$router.push('application');
					
				}

			},
			http(){
		
			}
		},
		mounted(){
		}
	}
</script>
<style scoped lang="less">
	@import '../../assets/style/color';
	@import '../../assets/style/font';

	.form{
		width:300px;
		margin:0 auto;
		.form-group{
			margin:0;
			>.form-control{
				border-color:#fff;
			}
			&:first-child{
				border-bottom:1px solid #f0f0f0;
				>.form-control{
					border-radius:2px 2px 0 0;
				}
			}
			&:last-child{
				>.form-control{
					border-radius: 0 0 2px 2px;		
				
				}
			}
			.form-group__message{
			    right: 20px;
			}
		}
		.btn-area{
			margin-top:18px;
			>.btn{
				width:100%;
			}
			>.form-control{
				margin:0 0 18px 0;
				background: none;
				color:#2B98F0;
				border:1px solid #2B98F0;
				&.active{
					background: #2B98F0;
					color:#fff;
				}
				&:hover{
					background: #2BB9F0;
					color:#fff;
				}
			}
		}
		.fg-pwd{
			font-size: 10px;
		    color: #8D8D8D;
		    line-height: 26px;
		    cursor: pointer;
		    &:hover{
		    	color:#2B98F0;
		    }
		}
	}
</style>